<template>
	<section class="wrapper" @keyup.enter="doLogin">
		<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
			<el-row>

				<el-col :span="4">
					<el-form-item label="sku关键词：">
						<el-input placeholder="请输入关键词" v-model="filter.entityOwnerName" size="small"></el-input>
					</el-form-item>
				</el-col>
					
				
				<el-col :span="4">
					<el-form-item label="品牌名称:">
						<el-input placeholder="品牌名称" v-model="filter.brandName" size="small"></el-input>
					</el-form-item>
				</el-col>
				
				<el-col :span="4">
					<el-form-item label="平台名称:">
						<el-select v-model="filter.entityPlatform" size="small">
							<el-option label="全部" value=""></el-option>
							<el-option label="淘宝" value="淘宝"></el-option>
							<el-option label="天猫" value="天猫"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				

			</el-row>
			<el-row>
				
			</el-row>
			<el-row>
				<el-col :span="24" class="action_col">
					<el-form-item class="action_button_group_open">
						<el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
						</el-button>
						<el-button size="small" type="primary" @click="getlists" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span='24' class="hide_and_show">
					<el-form-item class="action_button_group_open">
						
						<a size="small" @click="exportTable()" class="export">
							<el-button size="small" icon="el-icon-zoom-in">导出</el-button>
							<el-button size="small" @click="shieldBox"  icon="el-icon-document">导出全部</el-button>

						</a>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" >
					<el-table-column type="selection" width="55">
					</el-table-column>
					<!-- <el-table-column label="品牌名称" min-width="270" align="center">
						<template scope="scope">
							<div>{{ scope.row.entityOwnerName }}<span>　({{scope.row.entityOwnerId}})</span></div>
						</template>
					</el-table-column> -->
					<el-table-column prop="brandName" label="品牌名称" min-width="100" align="center">
					</el-table-column>
					<el-table-column prop="intellectualStr" label="sku关键词" min-width="150" align="center">
					</el-table-column>
					
					<el-table-column prop="saleMemberName" label="商品标题" min-width="90" align="center">
					</el-table-column>
					<el-table-column prop="entityPatform" label="平台" min-width="110" align="center">
					</el-table-column>
					<el-table-column prop="dockMemberName" label="pc端单价（元）" min-width="90" align="center">
					</el-table-column>
					
				</el-table>

			</el-row>
			<el-row class="paging">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="pagingData.pageNum" :page-sizes="pagingData.pageSizes" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="pagingData.total">
				</el-pagination>
			</el-row>
			
			<!--导出的表格--> 
			<el-row class='margin-table1'>
				<el-table ref="multipleTable" :data="tableDataCheck" border id="table01">
					
					<el-table-column prop="brandName" label="品牌名称" min-width="100" align="center"></el-table-column>
					<el-table-column prop="entityPatform" label="平台名称" min-width="110" align="center"></el-table-column>
					<el-table-column label="被投诉方名称" min-width="110" align="center">
						<template scope="scope">
							<div>{{ scope.row.entityOwnerName }}<span></span></div>
						</template>
					</el-table-column>
					<el-table-column label="处理时间" min-width="110" align="center">
						<template scope="scope">
							<div>{{ scope.row.appealDate }}<span></span></div>
						</template>
					</el-table-column>
					<el-table-column label="链接" min-width="600" align="center">
						<template scope="scope">
							<a :href="scope.row.listhrefs" target="_blank">{{scope.row.listhrefs}}</a>
							
						</template>
					</el-table-column>
					
					<el-table-column label="处理状态/备注" min-width="140" align="center">
						<template scope='scope'>
							<div>{{scope.row.statusStr}}</div>
							<div class="asd" v-show="scope.row.complaintRemark != 'null' ">{{scope.row.complaintRemark}}</div>
						</template>

					</el-table-column>
					<el-table-column prop="appealFlagName" label="屏蔽状态" min-width="100" align="center">
					</el-table-column>
					<el-table-column prop="iprUserName" label="投诉账号" align="center" min-width='100'>
					</el-table-column>
				</el-table>

			</el-row>
			
		</el-form>
	</section>
</template>

<script>
	import Vue from 'vue'
	import { mapGetters } from 'vuex'
	import { Row, Col, Form, FormItem, Button, Select, Option, DatePicker, Table, Pagination, TableColumn, Input, Tabs, TabPane, Message, MessageBox } from 'element-ui';
	import { getDate, getArraySub, getLevelName, validTel, setToken, getCookie } from '../../utils/auth';

	Vue.use(Row);
	Vue.use(Col);
	Vue.use(Form);
	Vue.use(FormItem);
	Vue.use(Button);
	Vue.use(Select);
	Vue.use(Input);
	Vue.use(Option);
	Vue.use(DatePicker);
	Vue.use(Table);
	Vue.use(Tabs);
	Vue.use(TabPane);
	Vue.use(TableColumn);
	Vue.use(Pagination);

	Vue.prototype.$message = Message;
	Vue.prototype.$confirm = MessageBox.confirm;
	export default {
		head() {
			return {
				title: this.title,
			}
		},
		data() {
			return {
				tabName: '任务结果明细',
				title: "任务结果明细",
				filter: {
					iprUserName:'',//投诉账号
					brandName: '', //品牌名称
					entityOwnerName: '', //被投诉方名称
					intellectualStr: '', //知识产权类型
					statusStr: '', //处理状态
					appealFlag: '', //投诉状态
					entityPlatform: '', //投诉平台
					pageSize: 10,
					pageNum: 1, //页码
					appealDateBegin: '', //创建时间开始
					appealDateEnd: '', //创建时间结束
				},
				pickerOptions1: { //处理时间只能选择今天之前的
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				tableDataCheck:[],
				tableData: [],
				pagingData: {
					pageSizes: [10, 20, 50, 1000], // 每页可选条数列表,
					total: 0,
					pageNum: 1
				},
				multipleSelection: [], //checkbox选中客户列表数据
				GmtCreate: [], //创建时间
				mapAppealFlags: [], //chaeckbox选中列表数据的屏蔽状态
				brr: [],
				pingbi: false, //屏蔽按钮的禁用与否
				cancelpingbi: false, //撤销屏蔽按钮的禁用与否
			}
		},
		computed: {
			...mapGetters({
				'pageTabsList': 'getPageTabsList'
			})
		},
		methods: {

			//点击enter实现搜索
			doLogin(event) {
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode == 13) {
					this.getlists();
				}
			},

			empty() {
				let pageSize = this.filter.pageSize;
				let pageNum = this.filter.pageNum;
				this.filter = {
						iprUserName:'',//投诉账号
						brandName: '', //品牌名称
						entityOwnerName: '', //被投诉方名称
						intellectualStr: '', //知识产权类型
						statusStr: '', //处理状态
						appealFlag: '', //投诉状态
						entityPlatform: '', //投诉平台
						pageSize: pageSize,
						pageNum: pageNum, //页码
						appealDateBegin: '', //创建时间开始
						appealDateEnd: '', //创建时间结束
					},
					this.GmtCreate = []; //创建时间
			},

			getlists() {
				if(this.GmtCreate && this.GmtCreate[0]) {
					this.filter.appealDateBegin = this.GmtCreate[0] ? getDate(this.GmtCreate[0], true) : '';
					this.filter.appealDateEnd = this.GmtCreate[1] ? getDate(this.GmtCreate[1], true) : '';
				} else {
					this.filter.appealDateBegin = '';
					this.filter.appealDateEnd = '';
				}
				//    		var Id=this.filter.appealId;
				this.$store.dispatch('getAppealDetailInfoList',
						this.filter
					)
					.then((response) => {
						if(!response) {
							return
						}
						let result = response.data;
						if(result.successed = true) {
							this.tableData = result.data.list;
							for(let i = 0; i < this.tableData.length; i++) {
								//						this.tableData[i].serialnumber = this.tableData[i].id;

								this.tableData[i].listhrefs = this.tableData[i].entityKeyUrl;
							}
							this.pagingData.total = result.data.total;
							this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
						} else if(result.data = null) {
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						} else {
							this.customerList = [];
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						}
					})
			},

			//表格的全选和单选
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.tableDataCheck=val;
				if(this.tableDataCheck.length==0){
    	    		document.getElementsByClassName("export")[0].removeAttribute('href');
    	    	}
				let ids = [];
				let appealFlag = [];
				for(let i = 0; i < val.length; i++) {
					ids.push(val[i].id);
					appealFlag.push(val[i].appealFlag);
				}
				this.multipleSelection = ids;
				this.mapAppealFlags = appealFlag;
				var arr = this.mapAppealFlags;
				this.brr = Array.from(new Set(arr));
				if(this.brr.length == 1) {
					for(let i = 0; i < this.brr.length; i++) {
						if(this.brr[i] == 1) {
							this.cancelpingbi = true;
							this.pingbi = false;
						} else {
							this.cancelpingbi = false;
							this.pingbi = true;
						}
					}
				} else if(arr.length == 0) {
					this.cancelpingbi = false;
					this.pingbi = false;
				}
			},

			
			handleCurrentChange(val) {
				this.filter.pageNum = val;
				this.tableDataCheck=[];
				this.getlists(this.filter);
			},
			handleSizeChange(val) {
				this.filter.pageSize = val;
				this.filter.pageNum = 1;
				this.getlists(this.filter);
			},
			exportTable() { //将表格内容导出到excel中
				if(this.tableDataCheck.length==0){
					this.$message({type: 'error',message: '请先选择要导出的投诉进度信息'});
					return false;
				}else{
					let html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById('table01').outerHTML + "</body></html>";
					// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
					let blob = new Blob([html], {
						type: "application/vnd.ms-excel"
					});
					let a = document.getElementsByClassName("export")[0];
					// 利用URL.createObjectURL()方法为a元素生成blob URL
					a.href = URL.createObjectURL(blob);
					// 设置文件名，目前只有Chrome和FireFox支持此属性
					a.download = "任务结果明细表.xls";
				}

			},
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
				if(this.pageTabsList[this.pageTabsList.length - 1].name == 'CRM') {
					let arr = this.pageTabsList;
					arr[arr.length - 1].name = this.tabName;
					this.$store.commit('PAGETABSLIST', {
						data: arr
					})
				}
			}
		},
		mounted() {
			//    	var nums = this.$route.query.numbers;
			//    	this.tabName = nums;
			this.getlists();
		},

	}
</script>

<style lang="scss">
	.wrapper {
		a,
		a:hover,
		a:focus,
		a:visited {
			-webkit-text-decoration-line: underline;
			text-decoration-line: underline;
		}
		.margin-table1{z-index: 0 !important;opacity: 0;height:0 !important;overflow: hidden;}
		
		.paging {
			margin-top: 20px;
		}
		.el-form {
			.el-form-item {
				width: 70%
			}
			.asd {
				font-size: 13px;
				color: #7A7A7A;
			}
		}
	}
</style>